<h3>单个表单控件</h3>
<label for="name">
    Name：
    <!-- 通过ReactiveFormsModule中的formControl指令将表单和表单组件实例关联 -->
    <!-- 使用这种模板绑定语法，把该表单控件注册给了模板中名为 name 的输入元素。这样，表单控件和 DOM 元素就可以互相通讯了：视图会反映模型的变化，模型也会反映视图中的变化。 -->
    <input type="text" id="name" [formControl]="nameEditor">
</label>
<p>
    Value：{{nameEditor.value}}
</p>
<button nz-button [nzType]="'primary'" (click)="resetName($event)">ResetName</button>

<h3>表单空间组</h3>
<form [formGroup]="fomGroup" (ngSubmit)="onSubmit($event)">
    <label for="age">
        Age:
        <input type="number" id="age" name="age" formControlName="age">
    </label>
    <label for="address">
        Address:
        <input type="text" id="address" name="address" [formControlName]="'address'">
    </label>
    <input type="submit" value="Submit" nz-button nzType="primary">
</form>

<h3>嵌套的表单组</h3>
<form [formGroup]="formArray" (ngSubmit)="submitArray()">
    <label for="name">
        Name:
        <input type="text" name="name" formControlName="name">
    </label>
    <label for="age">
        Age:
        <input type="number" name="age" formControlName="age">
    </label>
    <div class="sub-form" formGroupName="address">
        <label for="city">
            City:
            <input type="text" name="city" formControlName="city">
        </label>
        <label for="street">
            Street:
            <input type="text" name="street" formControlName="street">
        </label>
    </div>
    <!-- type为'submit'时会触发form的ngSubmit事件 -->
    <input type="button" value="Update" (click)="updateFormGroup()">
</form>

<h3>FormBuilder生成更加复杂的表单控件</h3>
<form [formGroup]="profileForm">
    <label for="name">
        Name:
        <input type="text" name="name" formControlName="name">
    </label>
    <label for="link">
        Link:
        <input type="text" name="link" formControlName="link">
    </label>
    <div class="sub-form" formGroupName="address">
        <label for="province">
            Province:
            <input type="text" name="province" formControlName="province">
        </label>
        <label for="city">
            City:
            <input type="text" name="city" formControlName="city">
        </label>
    </div>
    <input type="submit" value="Submit" nz-button nzType="primary" [disabled]="profileForm.status === 'INVALID'">
    <p>
        FormStatus:
        {{profileForm.status}}
    </p>
</form>